<template>
<div class="navbar">
<!-- 顶部栏 -->
    <div class="top">
      <div class="logo" @click="toHome()">Yukinoshita Yukino</div>
      <div class="user">
        <el-avatar size="medium" :src="circleUrl" class="icon"></el-avatar>
        <span class="nickname">浓度很高</span>
      </div>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
      <el-menu-item index="/home">首页</el-menu-item>
      <el-submenu index="2" :class="{'is-active': activeIndex == '2'}">
        <template slot="title">bangumi</template>
        <el-menu-item v-for="item in bangumiList" :key="item.id" :index="item.index">{{item.name}}</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">二创</template>
        <el-menu-item index="/mad">MAD</el-menu-item>
        <el-menu-item index="/article">文章</el-menu-item>
      </el-submenu>
      <el-menu-item index="/contact">联系我</el-menu-item>         
    </el-menu>
</div>
</template>
<script>
export default {
  name: 'yukinoNavbar',
  data () {
    return {
      activeIndex: '2',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // 番剧列表
      bangumiList: null,
    }
  },
  watch: {
    '$route' (to, from) {
      // 若在不同动态路由页面刷新页面
      if(to.path !== from.path) {
        location.reload();
      }
    }
  },
  methods: {
    // 返回首页
    toHome () {
      this.$router.push('/home');
    },
    // 获取番剧列表
    getBangumiList() {
      let _this = this;
      this.$axios.get("/api/getBangumi.php").then((res)=> {
        _this.bangumiList = res.data;
        for(var i=0; i<_this.bangumiList.length; i++) {
          _this.bangumiList[i].index = "/media/md" + _this.bangumiList[i].index;
        }
      })
    },
    // 当前页面为active状态
    getUrl() {
      var currentUrl = this.$router.currentRoute.path;
      currentUrl = currentUrl.split('/');
      switch(currentUrl[1]) {
        case 'home':
          this.activeIndex = "/home";
          break;
        case 'media': case 'play':
          this.activeIndex = "2";
          break;
        case 'mad': case 'article':
          this.activeIndex = "3";break;
        case 'contact':
          this.activeIndex = "/contact";break;
      }
    }
  },
  created() {
    this.getBangumiList();
    this.getUrl();
  },
}</script>
<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #313a53;
}
.logo {
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.user {
  display: flex;
  align-items: center;
}
.user .icon {
  margin-right: 15px;
  cursor: pointer;
}
.user span {
  color: #fff;
  font-size: 15px;
  margin-right: 20px;
  cursor: pointer;
}
.user:hover .nickname {
  color: #269cc8;
}
</style>